<template>
  <div>
    <!-- <pop :opt='opt'></pop> -->
    <!-- <div v-show='this.$store.state.header'>
        <headerDiv :header='this.$store.state.header'></headerDiv>
      </div> -->
    <div class="ub inputBox ub-ver">
      <div class="ub mar_05 h_3 ub-ac ub-pj">
        <input type="number" placeholder="手机号" class="ub ub-f1" :value="this.$store.state.loginData.phone" @input="phoneChange">
        <div class="ub-img1 clear_icon" @click='clearClick' v-show="this.$store.state.loginData.phone"></div>
      </div>
      <div class="ub mar_05 h_3 ub-ac ub-pj">
        <input placeholder="密码" :value='this.$store.state.loginData.pd' class="ub ub-f1" :type="inputType" @input="pdChange">
        <div class="ub ub-img1" @click='eyeClick' :class='showpd'></div>
      </div>
      <div class="ub login mar_05 ub-pc ub-ac" @click='loginClc'>
        <div>登录</div>
      </div>
    </div>
    <div class="ub ub-pj mar_1 mar_t0 defCol">
      <div class="ub" @click='quick'>快速登录</div>
      <div class="ub" @click='forgetPd'>忘记密码</div>
    </div>
    <div class="mar_1 col6 txt">
      <span class="bigtxt">温馨提示</span>
      在手机wap端注册的用户与飞行加app的用户同步，暂时不与西部航空官方网站电脑版注册的用户同步，如需查询电脑版官网订单请访问www.westair.cn，给您造成的不便敬请谅解。
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
export default {
  name: 'login',
  created: function () {
    this.$store.commit('changeHeader', {
      left: '首页',
      right: '注册',
      middle: '会员登录',
      ifshow: true,
      leftAction: '/index',
      leftIcon: 'closeIcon',
      rightAction: '/register',
      rightIcon: ''
    });
    this.$store.state.loginData.phone = '';
    this.$store.state.loginData.pd = '';
  },
  computed: {
  },
  data: function () {
    return {
      inputType: 'password',
      showpd: 'unsee'
    };
  },
  components: {
    // headerDiv: headerDiv,
    // pop: pop
  },
  methods: {
    pdChange: function (e) {
      this.$store.state.loginData.pd = e.target.value;
    },
    phoneChange: function (e) {
      let phone = e.target.value;
      this.$store.state.loginData.phone = phone;
    },
    eyeClick: function () {
      // console.log('123');
      // console.log(this.inputType);
      this.inputType = this.inputType === 'password' ? 'text' : 'password';
      this.showpd = this.showpd === 'see' ? 'unsee' : 'see';
    },
    loginClc: function () {
      let pho = this.$store.state.loginData.phone;
      let pd = this.$store.state.loginData.pd;
      // console.log(pho);
      // console.log(RS.login);
      let regPho = /^1\d{10}$/;
      if (!regPho.test(pho)) {
        console.log('请输入正确电话号码');
        this.$store.dispatch('showTx', { text: '请输入正确电话号码' })
        return false;
      }
      if (!pd) {
        console.log('密码不能为空');
        this.$store.dispatch('showTx', { text: '请输入密码' })
        return false;
      }
      // let timestamp = new Date().getTime() + '';
      pd = this.$utils.getMD5(pd);
      let content = {
        userMobile: pho,
        userPassword: pd
      };
      let data = this.$utils.getUserContent(content);
      console.log(data);
      // return false;
      this.$store.commit('showLoading');
      this.$http.post(this.$RS.login, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body
          console.log(res);
          if (res.code === 1000) {
            // console.log('in');
            let userInfo = res.content;
            // console.log(userInfo);
            this.$store.commit('setLogin', userInfo);
            window.localStorage.setItem('loginData', JSON.stringify(userInfo))
            window.localStorage.setItem('isLogin', 'yes')
            window.localStorage.setItem('userIcon', userInfo.userIcon)
            // console.log(this.$store.state.loginData);
            // 设置sessionStorage
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            localStorage.setItem('opt_token', JSON.stringify(userInfo.token));
            localStorage.setItem('loginState', 'yes');
            localStorage.setItem('userId', userInfo.userId);
            localStorage.setItem('loginToken', userInfo.token.loginToken);
            this.$utils.setSession('loginData', userInfo)
            this.$router.go('-1');
          } else {
            console.log('out');
            this.$store.dispatch('showTx', { text: res.message });
          }
        },
        function (err) {
          // 响应错误回调
          this.$store.commit('closePop');
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    quick: function () {
      this.$router.push('/fastLogin');
      console.log('123');
    },
    forgetPd: function () {
      console.log('123');
      this.$router.push('/forgetPd');
    },
    clearClick: function () {
      // console.log('123');
      // this.pho_num = '';
      this.$store.state.loginData.phone = '';
    },
    showPop: function () {
      this.opt = {
        ifshow: true,
        showLoading: true,
        showTx: false,
        content: ''
      };
      console.log(this.opt);
    }
  }
};
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.inputBox
  font-size: $fontSize;
  width: 100%;
  padding: $fontSize f_times(0.5);
  box-sizing: border-box;
input, .inputBox > div:not(:last-child)
  background-color: #eee;
input
  padding: f_times(0.5) $fontSize;
  font-size: $fontSize;
  border: 0;
  outline: 0;
::-webkit-input-placeholder
  font-size: $fontSize;
.h_3
  height: f_times(3);
.see
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('login_visble@2x.png');
  margin-right: $fontSize;
.unsee
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('login_hidden@2x.png');
  margin-right: $fontSize;
.clear_icon
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('form_clear@2x.png');
  margin-right: $fontSize;
.login
  background-color: $bgCol;
  color: $fontCol;
  width: 100% - f_times(0.3);
  box-sizing: border-box;
  height: f_times(2.5);
  border-radius: 3px;
  margin-top: $fontSize;
.defCol
  color: $bgCol;
.txt
  line-height: f_times(1.5);
.col6
  color: $col666;
.bigtxt
  display: block;
  margin-bottom: $fontSize;
  font-size: f_times(1.2);
</style>